<!--  -->
<template>
  <div class="bgcol">
    <div class="redTltle">
      全国党校（行政学院）期刊内刊数据库
    </div>
    <!--    搜索-->
    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" @focus="tosearch" />
    </div>
    <!--    icon-->
    <div class="fiveIcon">
      <van-row type="flex" justify="space-between" class="iconItem">
        <van-col span="4" @click="toBookShow()">
          <img src="../../assets/icon_zkzs.svg" class="imgSize"/>
          <!--          <van-icon name="orders-o" size="1rem" @click="toBookShow()"/>-->
          <div class="IconText">整刊展示</div>
        </van-col>
        <van-col span="4" @click="toResourcesList()">
          <img src="../../assets/icon_dkzy.svg" class="imgSize">
          <!--          <van-icon name="chat-o" size="1rem"/>-->
          <div class="IconText">党刊资源</div>
        </van-col>
        <van-col span="4"  @click="toExpertList()">
          <img src="../../assets/icon_zjxz.svg" class="imgSize">
          <!--          <van-icon name="map-marked" size="1rem"/>-->
          <div class="IconText">专家学者</div>
        </van-col>
        <van-col span="5"  @click="gobigData">
          <img src="../../assets/icon_dkdsj.svg" class="imgSize">
          <!--          <van-icon name="chat-o" size="1rem"/>-->
          <div class="IconText">党刊大数据</div>
        </van-col>
        <van-col span="4" @click="toAbout">
          <img src="../../assets/icon_gy.svg" class="imgSize">
          <!--          <van-icon name="warning" size="1rem"/>-->
          <div class="IconText">关于</div>
        </van-col>
      </van-row>
    </div>
    <div class="gyLion"></div>
    <!--  内容全部-->
    <div class="content">
      <!--    第一部分 热门文章推荐-->
      <div class="contentbox">
        <van-cell title="热门文章推荐"  class="contentTextTitle"/>
        <div v-for="(item,index) in topOne" class="top1box" @click="torouter(item,index)">
          <van-row>
            <van-col span="14">
              <div class="top1topText">
                {{ item.title }}
              </div>
              <div class="dataText">
                <van-row>
                  <van-col span="8" class="top1bottomText">发表时间：</van-col>
                  <van-col span="16" class="top1bottomText">{{ item.publishDate }}</van-col>
                </van-row>
              </div>
            </van-col>
            <van-col span="10" style="border-radius: 0.107rem;overflow: hidden;height:2.5rem">
              <van-image
                  width="100%"
                  height="2.56rem"
                  :src="ip + item.pingyinName + '.Jpg'"
              />
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="gyLion"></div>
      <!--      第二部分 整刊展示-->
      <div class="contentbox">
        <div class="contentTextTitle">
          整刊展示
        </div>
        <div>
          <!--          公开出版二级标题-->
          <div class="openTitle">
            <div class="openTitleLeft">
              公开出版
            </div>
            <div class="openTitleLion">
              <div class="openTitleLion1"></div>
            </div>
            <div class="openTitleRight" @click="onClick">
              更多
              <van-icon name="arrow"/>
            </div>
          </div>
          <!--          <van-cell title="公开出版"  is-link value="更多" class="contentTextTitleBgimg" @click="onClick"/>-->
          <div class="wrapper">
            <swiper :options="swiperOption">
              <swiper-slide v-for="item of open" :key="item.id">
                <img class="swiper-imgbook" :src="ip + item.pinyinName + '.Jpg'" @click="openbookDetails(item, index) "/>
                <div class="imgbook-title"> {{item.title}} </div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
        <div>
          <!--          非公开出版二级标题-->
          <div class="openTitle">
            <div class="openTitleLeft">
              非公开出版
            </div>
            <div class="openTitleLion">
              <div class="openTitleLion1"></div>
            </div>
            <div class="openTitleRight" @click="onClick1">
              更多
              <van-icon name="arrow"/>
            </div>
          </div>
          <!--          <van-cell title="非公开出版" is-link value="更多" class="contentTextTitleBgimg" @click="onClick1"/>-->
          <div class="">
            <div class="wrapper">
              <swiper :options="swiperOption">
                <swiper-slide v-for="(item , index) in notOpen" :key="index" >
                  <img class="swiper-imgbook" :src="ips + item.number + '.jpg'" @click="notopenbookDetails(item, index) "/>
                  <div class="imgbook-title"> {{item.title}} </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div>
          </div>
        </div>
      </div>
      <div class="gyLion"></div>
      <!--      第三部分 党刊资源-->

      <div class="conten-three">
        <van-cell title="党刊资源" is-link value="更多" class="contentTextTitle" @click="goresourcesList()"/>
        <div class="top3title">
          <div v-for="(item,index) in navTitle" class="top3titleItem" @click="clickcategory(index)"
               :class="{active:categoryIndex==index}">
            {{ item.name }}
          </div>
        </div>
        <div class="top3Item" v-for="(item , index) in top3" :key="index" @click="toqikdetail(item)">
          <div class="textLion"></div>
          <div class="top3TitleText">
            {{ item.title }}
          </div>
          <div style=" margin-bottom: 0.3rem;">
            <van-row class="top3Date">
              <van-col span="4">发表时间</van-col>
              <van-col span="6">{{ item.publishDate }}</van-col>
              <van-col span="2">作者</van-col>
              <van-col span="9">{{ item.author }}</van-col>
            </van-row>
          </div>

        </div>
      </div>
      <div class="gyLion"></div>
      <!--      专家学者-->
      <div class="top4title">
        <van-cell title="专家学者" is-link value="更多" class="contentTextTitle" @click="goExpertList(vul)"/>
      </div>
      <div class="peopleListImg">
        <div class="wrapperPeople">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) of aaa" :key="item.index" >
              <img class="swiper-img" :src="item.img" @click="imgPeople(item)" />
              <div class="peopleName" @click="imgPeople(item)">{{item.name}} </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import util from './utlis'
import {
  popularArticles,
  partyResource,
  GetExpertPicture,
  ExpertResource,
  wholeAtiicles,
  ExpertResourceFive
} from '@/api/journalApi/index'
import {PeriodicalResource} from '@/api/journalApi/notopenApi'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      aaa: [], //二进制循环图片数组
      PeopleListImg: '', //学者list
      swiperOption: { //配置参数
        slidesPerView: 2.5,
        centeredSlides: false,
        spaceBetween: 10,

        direction: 'horizontal',
        loop: false,     //循环
        autoplay: {      //自动播放
          delay: 1500,
          disableOnInteraction: false
        },
        speed: 1500     //播放速度
      },
      ip: 'https://c61.cnki.net/CJFD/big/', //热门文章拼接url
      ips:'http://218.89.178.103:805/tp/bdqk/cover/',
      value: '',
      categoryIndex: 0,
      topOne: [],//热门文章推荐list
      open: [],
      notOpen: [
        // require('../../assets/book_gkcb.png'),
        // require('../../assets/book_xq.png'),
        // require('../../assets/book_gkcb.png'),
        // require('../../assets/book_xq.png'),
        // require('../../assets/book_gkcb.png'),
        // require('../../assets/book_xq.png'),
        // require('../../assets/book_gkcb.png'),
      ],
      navTitle: [{
        name: '理论研究',
        code: 'X01,X08',
      },
        {
          name: '党史研究',
          code: 'X02',
        },
        {
          name: '领导决策',
          code: 'X06',
        },
        {
          name: '思想政治',
          code: 'X05',
        },
        {
          name: '党员教育',
          code: 'X03',
        },
        {
          name: '支部生活',
          code: 'X04',
        },
      ],
      top3: [],
      img: [
        require('../../assets/expert.png'),
        require('../../assets/expert.png'),
        require('../../assets/expert.png'),
        require('../../assets/expert.png'),
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    // 热门文章推荐
    let hotlist = {
      "limitNumber": 2
    }
    popularArticles(hotlist)
        .then(res => {
          // console.log(res.data)
          this.topOne = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    // 热门文章推荐end
    // 党刊资源
    let top3List = {
      "limitNumber": 3,
      "code": "X01,X08"
    }
    partyResource(top3List)
        .then(res => {
         // console.log(res.data)
          this.top3 = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    // 党刊资源 end
    //公开出版
    let wholeAtiiclesList = {
      limitNumber: 5,
      // type (xgdj和dxxg)
      type: ''
    }
    wholeAtiicles(wholeAtiiclesList)
        .then(res => {
          // console.log(res.data)
          this.open = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    //公开出版end
    //非公开
    let obj = {
      classify: "地方党校",
      page: "1",
      pageSize: "18",
      region: "华北片区",
    }

    PeriodicalResource(obj)
        .then(res=>{
           this.notOpen =  res.data.data.list
         // console.log(res)
        })
    //专家学者图片二进制请求
    let authorimgList = {
      "name": "",
      "page": 1,
      "pageSize": 5,
      "regionList": [],
      "organ": ""
    }
    ExpertResource(authorimgList)
        .then(res => {
         // console.log(res.data.data)
          this.PeopleListImg = res.data.data.list
         // console.log(this.PeopleListImg)
          for (let i = 0; i < 5; i++) {
            GetExpertPicture({
              tableName: this.PeopleListImg[i].tableName,
              picture: this.PeopleListImg[i].picture
            })
                .then(res => {
                  let bytes = new Uint8Array(res.data.data)
                 // console.log(res.data)
                  let storeData = ''
                  let len = bytes.byteLength
                  for (let i = 0; i < len; i++) {
                    storeData += String.fromCharCode(bytes[i])
                  }
                  this.aaa.push({
                    id: this.PeopleListImg[i].id, name: this.PeopleListImg[i].name,
                    img: "data:image/png;base64," + window.btoa(storeData)
                  })
                  // this.aaa.push("data:image/png;base64,"+window.btoa(storeData))
                  // console.log(this.PeopleListImg)
                  // console.log(this.aaa)
                })
                .catch(err => console.log(err))
          }
        })
        .catch(err => {
          console.log(err)
        })

  },
  mounted() {
  },
  methods: {
    //跳知网链接
    torouter(item,index){

       //gotodetail(item) {
     console.log(item)
      this.$router.push({
        path: '/readDownload',
        query: {
          'fileName': item.fileName,
          'dataSource': item.dataSource,
          'tableName': item.tableName,
          'sysId': item.sysID
        }
      })
   // },
      //this.$router.push({path: '/cnki',query: {tableName: item.tableName,fileName: item.fileName,}})
       //window.open('https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname='+item.tableName+'&filename='+item.fileName,'_blank')//
    },
    tosearch(){
      this.$router.push('resourcesList')
    },
    toResourcesList(item, index) {
      this.$router.push({path: '/resourcesList',})
    },
    openbookDetails(item, index) {
      // console.log(item)
      this.$router.push({path: '/bookDetails',query: {ids: item.pinyinName}})
    },
    notopenbookDetails(item, index) {
      this.$router.push({path: '/notOpenbookDetails',query: {ids: item.title}})
    },
    goExpertList(vul){
      //console.log()
      this.$router.push({path: '/expertList',})
    },
    goresourcesList(){
     // console.log()
      this.$router.push({path: '/resourcesList',})
    },
    //跳转详情页
    toqikdetail(item){
     // util.gotodetailqk(item.tableName,item.fileName)
       this.$router.push({
        path: '/readDownload',
        query: {
          'fileName': item.fileName,
          'dataSource': item.dataSource,
          'tableName': item.tableName,
          'sysId': item.sysID
        }
      })
    },
    //党刊资源 点击判断
    clickcategory(index) { // 这里传入一个当前值
      this.categoryIndex = index
     // console.log(this.categoryIndex)
      if (index === 0) {
        let top3List = {
          "limitNumber": 3,
          "code": "X01,X08"
        }
        partyResource(top3List)
            .then(res => {
            //  console.log(res.data)
              this.top3 = res.data.data
            })
            .catch(err => {
              console.log(err)
            })
      } else if (index === 1) {
        let top3List = {
          "limitNumber": 3,
          "code": "X02"
        }
        partyResource(top3List)
            .then(res => {
            //  console.log(res.data)
              this.top3 = res.data.data
            })
            .catch(err => {
              console.log(err)
            })
      } else if (index === 2) {
        let top3List = {
          "limitNumber": 3,
          "code": "X06"
        }
        partyResource(top3List)
            .then(res => {
            //  console.log(res.data)
              this.top3 = res.data.data
            })
            .catch(err => {
              console.log(err)
            })
      } else if (index === 3) {
        let top3List = {
          "limitNumber": 3,
          "code": "X05"
        }
        partyResource(top3List)
            .then(res => {
            //  console.log(res.data)
              this.top3 = res.data.data
            })
            .catch(err => {
              console.log(err)
            })
      } else if (index === 4) {
        let top3List = {
          "limitNumber": 3,
          "code": "X03"
        }
        partyResource(top3List)
            .then(res => {
             // console.log(res.data)
              this.top3 = res.data.data
            })
            .catch(err => {
              console.log(err)
            })
      } else if (index === 5) {
        let top3List = {
          "limitNumber": 3,
          "code": "X04"
        }
        partyResource(top3List)
            .then(res => {
             // console.log(res.data)
              this.top3 = res.data.data
            })
            .catch(err => {
              console.log(err)
            })
      }
    },
    toAbout() {
      this.$router.push({path: '/about',})
    },
    gobigData(){
      this.$router.push({path: '/bigData',})
    },
    toBookShow() {
      this.$router.push({path: '/Exhibition',})
    },
    toExpertList() {
      this.$router.push({path: '/expertList',})
    },

    // 公开出版的更多
    onClick(event) {
      this.$router.push({path: '/open',})
    },
    // 非公开出版的更多
    onClick1(event) {
      this.$router.push({path: '/NotOpen',})
    },
    imgPeople(item){
      this.$router.push({path: '/expertPeople',query: {ids: item.id,img: item.img,name:item.name}})
    }
  }
}


</script>
<style lang='less' scoped>
.bgcol {
  background-color: #fff;
}

.gyLion {
  width: 100%;
  height: 0.4rem;
  background-color: #efefef;
}

.redTltle {
  width: 100%;
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
}

.top1box {
  padding: 0.5rem 0 0.5rem 0;
  //opacity: 0.13;
  border-bottom: solid 0.013rem #efefef;
}

.fiveIcon {
  width: 88%;
  margin: 0 auto;
  height: 2.3rem;
  background-color: white;
  padding-top: 0.66rem;
}

.IconText {
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  text-align: center;
  margin-top: 0.14rem;
}

.iconItem {
  align-items: center;

  //margin-top: 1rem;
}

.iconItem > .van-col > .van-icon {
  width: 100%;
  text-align: center;
  color: red;
}

.content {
  //width: 9.373rem;
  margin: 0 auto;
}

.contentbox {
  width: 9.373rem;
  margin: 0 auto;
}

/deep/ .van-cell__title {
  font-family: PingFang-SC-Heavy;
  font-size: 0.48rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}

/deep/ .van-cell__value {
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #7e7e7e;
}

.contentTextTitle {
  font-family: PingFang-SC-Heavy;
  font-size: 0.48rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  padding: 0.5rem 0 0.25rem 0;
}

.top1topText {
  width: 5.107rem;
  height: 0.68rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}

.top1bottomText {
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #7e7e7e;
}

.dataText {
  margin-top: 1.4rem;
}

.openTitle {
  display: flex;

}

.openTitleLeft {
  background-image: url('../../assets/bg_publish.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 2.4rem;
  height: 0.67rem;
  line-height: 0.67rem;
  padding-left: 0.24rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
}

.openTitleLion {
  width: 5.8rem;
  height: 0.67rem;
  line-height: 0.67rem;
  //background-color: #af2536;
  //border-radius: 0.013rem 0rem 0rem 0.013rem;
}

.openTitleLion1 {
  width: 5.3rem;
  height: 0.027rem;
  margin-top: 0.36rem;
  background-color: #af2536;
  //border-radius: 0.013rem 0rem 0rem 0.013rem;
}

.openTitleRight {
  width: 1.3rem;
  height: 0.67rem;
  line-height: 0.67rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #7e7e7e;
}

.contentTextTitleBgimg {
  //font-family: PingFang-SC-Heavy;
  //font-size: 0.347rem;
  ////font-weight: bolder;
  //font-stretch: normal;
  //letter-spacing: 0rem;
  //color: #ffffff;
  padding: 0 5px;
  background-image: url('../../assets/bg_zkzs.png');
  background-size: 100% auto;
  background-repeat: no-repeat;

  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
}
.imgbook-title{
  width: 2.613rem;
  text-align: center;
  //height: 3.573rem;
  //padding-left: 0.2rem;
}

.my-swipe .van-swipe-item {
  margin: 0 0.2rem;
}

.BookTitle {
  width: 2.507rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  overflow: hidden; //溢出隐藏
  white-space: nowrap; //禁止换行
  text-overflow: ellipsis; //...
}

.conten-three{
  padding: 0 0.32rem;
}
.top3title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.top3titleItem {
  width: 1.6rem;
  height: 0.7rem;
  line-height: 0.7rem;
  //background-color: #af2536;
  border-radius: 0.04rem;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.65;
  text-align: center;
}

.active {
  background-color: #af2536;
  color: #ffffff;
  opacity: 1;
}

.top3Item {
  height: 2rem;
}
.top3Title{
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;

}
.top3Date {
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.5;
  margin-top: 0.4rem;

}

.top3Item > div:first-child {
  //margin-top: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 2行
}

.top3Item > div:last-child {
  margin-top: 0.2rem;
}
.top4title{
  padding: 0 0.32rem;
}

.swiper-img {
  width: 3.467rem;
  height: 3.467rem;
  //background-color: #af2536;
  border-radius: 0.133rem;
}

.swiper-imgbook {
  width: 2.547rem;
  height: 3.613rem;
}

.peopleListImg {
  margin: 0.3rem 0.32rem;
  height: 4.213rem;
}

.wrapper {
  margin: 0.3rem 0;
}
.wrapperPeople{
  height: 5.4rem;
}
.peopleName{
  width: 3.467rem;
  text-align: center;
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}
.imgSize {
  //margin-left: 0.19rem;
  width: 100%;
  height: 1.093rem;
}
.textLion{
  margin-bottom: 0.3rem;
  width: 9.4rem;
  height: 0.053rem;
  //border: solid 0.013rem #000000;
  opacity: 0.07;
  background-color: #000000;
}

</style>
